import { Resizable } from 'react-resizable';
import React, { useEffect, useState } from 'react';
import { Table, Input, Button, Modal, Divider, Radio } from 'antd';
import request from 'umi-request';
import './index.less'; //内部样式的书写
import { DownOutlined } from '@ant-design/icons';
import { Col, Form, Row, Select, theme, message } from 'antd';
// import '../..//iconfont/iconfont.css';
import '../../iconfont/iconfont.css';
const { Option } = Select;
import {
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
import {
  CarryOutOutlined,
  CheckOutlined,
  FormOutlined,
  MehOutlined,
} from '@ant-design/icons';
import { Switch, Tree } from 'antd';
import { history } from 'umi';
const EchartsTable = () => {
  const [ids, setids] = useState([]);
  // 选择
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      setids(selectedRows);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      name: record.name,
    }),
  };
  const [selectionType, setSelectionType] = useState('checkbox');
  const [open1, setOpen1] = useState(false);
  const showModal = () => {
    setOpen1(true);
  };
  const hideModal = () => {
    setOpen1(false);
  };
  const [open2, setOpen2] = useState(false);
  const showModal2 = () => {
    setOpen2(true);
  };
  const hideModal2 = () => {
    console.log(ids);
    ids.map((item) => {
      if (item.username) {
        message.error('删除失败,该用户关联登录账号');
      } else {
        request
          .delete('http://localhost:8597/hqh/get_personnel?id=' + item._id)
          .then((val1) => {
            request
              .get('http://localhost:8597/hqh/get_personnel')
              .then((val) => {
                setDatalist(val.data);
                setPagecount(val.datacount);
                setPagesize(val.datapage);
              });
          });
      }
    });
    setids([]);
    setOpen2(false);
  };

  const treeData = [
    {
      title: '总经办',
      key: '0-0',
      children: [
        {
          title: '综合管理部',
          key: '0-0-1',
          icon: <MehOutlined />,
        },
        {
          title: '投资发展部',
          key: '0-0-2',
          icon: <MehOutlined />,
        },
        {
          title: '人事行政部',
          key: '0-0-3',
          icon: <MehOutlined />,
        },
        {
          title: '财务部',
          key: '0-0-4',
          icon: <MehOutlined />,
        },
        {
          title: '企管部',
          key: '0-0-5',
          icon: <MehOutlined />,
        },
        {
          title: '研发部',
          key: '0-0-6',
          icon: <MehOutlined />,
        },
        {
          title: '经营部',
          key: '0-0-7',
          children: [
            {
              title: '市场部',
              key: '0-0-8',
              icon: <MehOutlined />,
            },
            {
              title: '销售部',
              key: '0-0-9',
              icon: <MehOutlined />,
            },
            {
              title: '渠道部',
              key: '0-0-10',
              icon: <MehOutlined />,
            },
            {
              title: '运维部',
              key: '0-0-11',
              icon: <MehOutlined />,
            },
            {
              title: '大客户部',
              key: '0-0-12',
              icon: <MehOutlined />,
            },
          ],
        },
        {
          title: '未知',
          key: '0-0-13',
          icon: <MehOutlined />,
        },
      ],
    },
  ];
  // 数组建
  const [showLine, setShowLine] = useState(true);
  const [showIcon, setShowIcon] = useState(false);
  const [showLeafIcon, setShowLeafIcon] = useState(true);
  const onSelect = (selectedKeys, info) => {
    console.log('selected', info.node.title);
    request
      .get('http://localhost:8597/hqh/get_personnel?name=' + info.node.title)
      .then((val) => {
        setDatalist(val.data);
        setPagecount(val.datacount);
        setPagesize(val.datapage);
      });
  };

  const AdvancedSearchForm = () => {
    const [form] = Form.useForm();
    const [expand, setExpand] = useState(false);
    const formStyle = {};

    const onFinish = (values) => {
      console.log('Received values of form: ', values);
    };
    return (
      <Form
        form={form}
        name="advanced_search"
        style={formStyle}
        onFinish={onFinish}
      >
        <Row gutter={24}>
          <Col span={4}>
            <Form.Item name="name" label="姓名">
              <Input placeholder="" />
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="bumen" label="部门">
              <Input placeholder="" />
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="gangwei" label="岗位">
              <Input placeholder="" />
            </Form.Item>
          </Col>
          <Button className="buttonzidingyi" type="primary" htmlType="submit">
            查询
          </Button>
        </Row>
      </Form>
    );
  };
  const [datalist, setDatalist] = useState([]); //  总数据渲染
  const [pagesize, setPagesize] = useState(0); // 一共多少页
  const [pagecount, setPagecount] = useState(0); // 数据条数
  const [inputpagesize, setiInputpagesize] = useState(1); // 输入框数据
  const [dcolumns, setDcolumns] = useState([]);
  const [components, setComponents] = useState({});
  const defaultColumns = [
    {
      title: '序号',
      key: '_id',
      width: 70,
      render: (text, record, index) => <>{index + 1}</>,
      ellipsis: true,
    },
    {
      title: '档案ID',
      key: 'id',
      width: 250,
      dataIndex: 'id',
      ellipsis: true,
    },
    {
      title: '档案编号',
      dataIndex: 'ids',
      key: 'ids',
      ellipsis: true,
      width: 150,
    },
    {
      title: '真实姓名',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      width: 130,
      render: (text) => <a style={{ color: '#9682e4' }}>{text}</a>,
    },
    {
      title: '登陆账号',
      dataIndex: 'username',
      key: 'username',
      ellipsis: true,
      width: 130,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      ellipsis: true,
      width: 130,
    },
    {
      title: '联系电话',
      dataIndex: 'lianxidianhua',
      key: 'lianxidianhua',
      ellipsis: true,
      width: 130,
    },
    {
      title: '出生日期',
      dataIndex: 'chsshengriqi',
      key: 'chsshengriqi',
      ellipsis: true,
      width: 130,
    },
    {
      title: '所在部门',
      dataIndex: 'suozaibumeng',
      key: 'suozaibumeng',
      ellipsis: true,
      width: 130,
    },
    {
      title: '所在岗位',
      dataIndex: 'suozaigangwei',
      key: 'suozaigangwei',
      ellipsis: true,
      width: 130,
    },
    {
      title: '入职时间',
      dataIndex: 'ruzhishijain',
      key: 'ruzhishijain',
      ellipsis: true,
      width: 130,
    },
  ];
  useEffect(() => {
    request.get('http://localhost:8597/hqh/get_personnel').then((val) => {
      setDatalist(val.data);
      setPagecount(val.datacount);
      setPagesize(val.datapage);
    });
    setDcolumns(defaultColumns);
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  }, []);

  const ResizeableTitle = (props) => {
    const { onResize, width = 130, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index) =>
    (e, { size }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setDcolumns(nextColumns);
    };

  const columns = dcolumns.map((col, index) => ({
    ...col,
    onHeaderCell: (column) => ({
      width: col.width || 130, // 130 没有设置宽度可以在此写死 例如130试下
      onResize: handleResize(index),
    }),
  }));
  const listStyle = {
    lineHeight: '200px',
    textAlign: 'center',
    marginTop: 16,
  };

  return (
    <div className="echartstab11">
      <div className="buttondata">
        <Button
          onClick={() => {
            history.push('/staffing/add');
          }}
        >
          新增
        </Button>
        <Button
          onClick={() => {
            if (ids.length > 0) {
              localStorage.setItem('renyuan_id', ids[0]._id);
              history.push('/staffing/updatetext');
            } else {
              message.error('请选择修改人员');
            }
          }}
        >
          修改
        </Button>
        <Button onClick={ids.length > 0 ? showModal2 : showModal}>删除</Button>
        <Button>过滤</Button>
        <Button>还原</Button>
        <Button>打印</Button>
        <Button>导入</Button>
        <Button>导出</Button>
        <Button>查看日志</Button>
      </div>
      <div style={{ margin: '5px' }}>
        <Row>
          <Col span={6}>
            {' '}
            <ProFormText width="170px" name="name1" label="管理项目" />
          </Col>
          <Col span={6}>
            {' '}
            <ProFormText width="170px" name="name2" label="合作名称" />
          </Col>
          <Col span={6}>
            <ProFormText width="170px" name="name3" label="客户名称" />
          </Col>
          <Col span={6}>
            {' '}
            <ProFormText width="170px" name="name4" label="销售人员" />
          </Col>
        </Row>
        <Row>
          <Col span={6}>
            {' '}
            <ProFormText width="170px" name="name5" label="发货状态" />
          </Col>
          <Col span={6}>
            {' '}
            <ProFormText width="170px" name="name6" label="出库状态" />
          </Col>
          <Col span={6}>
            {' '}
            <Button className="searcha">查询</Button>
          </Col>
        </Row>
      </div>

      <div
        style={{ textAlign: 'center', marginBottom: '10px', fontSize: '23px' }}
      >
        人员档案
      </div>
      <div className="flexTables">
        <div className="flexTables_lefts">
          <Tree
            style={{ width: '300px', border: '1px solid #c0ccdd' }}
            showLine={showLeafIcon}
            showIcon={showIcon}
            height={350}
            onSelect={onSelect}
            treeData={treeData}
          />
        </div>
        <div className="flexTables_rights">
          <div className="container hou_1_pre1">
            <Table
              rowSelection={{
                type: selectionType,
                ...rowSelection,
              }}
              components={components}
              columns={columns}
              pagination={false}
              bordered
              rowKey="_id"
              scroll={{
                x: 400,
                y: 300,
              }}
              onRow={(record, index) => {
                return {
                  onClick: (e) => {
                    let tr = e.target.parentNode; //拿到tr标签
                    for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
                      tr.parentNode.childNodes[i].style.color = 'black';
                    }
                    //单独设置被选中的标签颜色
                    tr.style.color = 'red';
                  },
                };
              }}
              dataSource={datalist}
            />
            <div className="hou_2">
              <Button
                onClick={() => {
                  let a = Number(inputpagesize) - 1;
                  setiInputpagesize(a);
                  request
                    .get(
                      'http://localhost:8597/hqh/get_personnel?pagesize=' + a,
                    )
                    .then((val) => {
                      setDatalist([]);
                      setDatalist(val.data);
                    });
                }}
                disabled={inputpagesize >= pagesize ? false : true}
              >
                {' '}
                <span className="span_1 iconfont icon-xiangzuoshuangjiantou"></span>{' '}
              </Button>
              <Button
                onClick={() => {
                  let a = Number(inputpagesize) - 1;
                  setiInputpagesize(a);
                  request
                    .get(
                      'http://localhost:8597/hqh/get_personnel?pagesize=' + a,
                    )
                    .then((val) => {
                      setDatalist([]);
                      setDatalist(val.data);
                    });
                }}
                disabled={inputpagesize >= pagesize ? false : true}
              >
                {' '}
                <span className="span_2  iconfont icon-xiangzuojiantou"></span>{' '}
              </Button>
              <span className="span_2_2  iconfont icon-vertical_line"></span>
              <span className="span_3">
                第
                <Input
                  value={inputpagesize}
                  onChange={(e) => {
                    setiInputpagesize(e.target.value);
                    request
                      .get(
                        'http://localhost:8597/hqh/get_personnel?pagesize=' +
                          e.target.value,
                      )
                      .then((val) => {
                        setDatalist([]);
                        setDatalist(val.data);
                      });
                  }}
                />
                页，
              </span>
              <span className="span_4">共 {pagesize} 页</span>
              <span className="span_4_2  iconfont icon-vertical_line"></span>
              <Button
                onClick={() => {
                  let a = Number(inputpagesize) + 1;
                  setiInputpagesize(a);
                  request
                    .get(
                      'http://localhost:8597/hqh/get_personnel?pagesize=' + a,
                    )
                    .then((val) => {
                      setDatalist([]);
                      setDatalist(val.data);
                    });
                }}
                disabled={inputpagesize >= pagesize ? true : false}
              >
                <span className="span_5  iconfont icon-xiangyoujiantou"></span>
              </Button>
              <Button
                onClick={() => {
                  let a = Number(inputpagesize) + 1;
                  setiInputpagesize(a);
                  request
                    .get(
                      'http://localhost:8597/hqh/get_personnel?pagesize=' + a,
                    )
                    .then((val) => {
                      setDatalist([]);
                      setDatalist(val.data);
                    });
                }}
                disabled={inputpagesize >= pagesize ? true : false}
              >
                <span className="span_6  iconfont icon-xiangyoushuangjiantou"></span>
              </Button>
              <p className="hou_2_p">
                显示 {inputpagesize * 10 - 9} - {inputpagesize * 10} 条，共{' '}
                {pagecount}条
              </p>
            </div>
          </div>
        </div>
      </div>
      {/* 删除弹出 */}
      <div className="modelSelect">
        <Modal
          closable={false}
          title="对话提示框"
          open={open1}
          onOk={hideModal}
          onCancel={hideModal}
          okText="确认"
          cancelText="取消"
          style={{ height: '500px !important' }}
        >
          <p>请选择要删除的数据</p>
        </Modal>

        <Modal
          title="删除提示"
          open={open2}
          onOk={hideModal2}
          onCancel={hideModal2}
          okText="确认"
          cancelText="取消"
        >
          <p>是否确定要删除选中记录？</p>
        </Modal>
      </div>
    </div>
  );
};

export default EchartsTable;
